<template>
  <div class="container">
      <p>X 轴：{{ x }} Y 轴：{{ y }}</p>
      <hr />
      <div>
          <p>{{ count }}</p>
          <button @click="add()">自增</button>
      </div>
  </div>
</template>
<script>
// Vue2 选项 API：同一功能的数据和业务逻辑太过于分散了，小项目挺好的，对于大型项目来说不利于维护和复用
  export default {
      name: 'App',
      data() {
          return {
              // !#Fn1
              x: 0,
              y: 0,
              // ?#Fn2
              count: 0,
          }
      },
      mounted() {
          // !#Fn1
          document.addEventListener('mousemove', this.move)
      },
      methods: {
          // !#Fn1
          move(e) {
              this.x = e.pageX
              this.y = e.pageY
          },
          // ?#Fn2
          add() {
              this.count++
          },
      },
      destroyed() {
          // !#Fn1
          document.removeEventListener('mousemove', this.move)
      },
  }
</script>